FE8828 Programming Web Applications in Finance

Week 1
What’s Internet? What’s Web?
Launch into the Cloud
R Markdown and Shiny layout

Dr. Yang Ye <Email:yy@runchee.com>

Oct 29, 2018

Where does this course stands on?

Where does this course stands on? (updated in 2018)

New version in 2018.

Where does this course stands on?

Where does this course stands on?

Objective

  1. Know the way of Internet: the network, the cloud and the application.
  2. Use data manipulation and data visualization to do exploratory data analysis.
  3. To do option valuation, and trading strategy performance analysis.
  4. Build real-world data-driven reports and dashboard, data visualization.
  5. Latest technology in cryptocurrency and payment system like Bitcoin and Blockchain.

What does it take?

Course Outline: Week 1-3

Course Outline: Week 4-6

Assingments

Keep calm and code on

Lecture 1: What’s Internet? What’s Web?

Network

Network is to connect the dots

Network is to connect the devices

Building network

Building network

Network talks

What runs inside the cables?

Network talks with Network Protocol

  1. Information turns to packet according to protocol speicification
  2. Protocol also specifies the process
  3. Infrastructure is to route the packets to the destination.

Packet

  1. Information turns to packet

Protocol

  1. Protocol designs the packet and process

TCP Session

DHCP Session

Routing/Gateway

  1. Infrastructure helps to transmit and route the packets to the destination.

TCP/IP and Internet

What does TCP/IP gives?

A family of protocols but what’s most famous/“fundamental” is IP and TCP.

  1. IP (Internet Protocol)
    • IP address.
  2. TCP (Transmission Control Protocol) / UDP (User Datagram Protocol)
    • TCP provides reliable, ordered, and error-checked delivery of a stream
    • UDP provides real-time transmission which can accept failure.

TCP/IP

This is why and how Internet growed in size

A well-defined network protocles.

IETF (Internet Engineering Task Force) maintains and still gets new protocol approved.

What happens after plugging cable, turning on Wi-Fi?

When it wants to visit someone on the network? 1/2

When it wants to visit someone on the network? 2/2

HTTP/HTML

HTTP Request/Response

HTTP/HTML

Web

When you have HTML and URL (Uniform Resource Locator), Web is born.

How this resource is used in the document.

    <div class="thumbinner" style="width:302px;">
        <a href="/wiki/File:Web_Index.svg" class="image">
        <img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/65/Web_Index.svg/300px-Web_Index.svg.png"
            width="300" height="154" class="thumbimage"  />
        </a>
    </div>

Web Browser

First generation

Web application

Web application

To recap

Why the Internet succeeded?

To recap

Web application

Lecture 2: Amazon Web Services: Launch into the Cloud

Lecture 3: R Markdown and Shiny/1: layout

Introduction

Markup and Markdown

Markdown example

---
title: My first bitcoin
subtitle: and how I bought a pizza!
author: "Gru"
date: "Jul 9, 2010"
---

# How I bought it

I found someone was selling _10000_ on ebay for __$30__.
I think that's

- cool
- fun
- hacker

# How I used it

I forgot to bring my wallet the other day.
So I used **the bitcoins** to buy some pizza.

![Pizza](../notes/imgs/bitcoin-pizza.png)

Markdown Output example

Markdown: Header and Code

Headers

More hashtag, deeper level.

# Header1
## Header2
### Header3

Code

Give four spaces before it

    if (a > 0) {
      print(a)
    }
if (a > 0) {
  print(a)
}

Markdown: List

* First paragraph.
Continued.

* Second paragraph. With a code block, which must be indented
eight spaces:

        { code }

Markdown: Multi-level lists

Put four more spaces for each level.

* fruits
    + apples
        - macintosh
        - red delicious
    + pears
* vegetables
    + broccoli

Markdown: Ordered Lists

Put 4 more spaces for each level.

#. Chapter 1
    #. Section 1.1
    #. Section 1.2
#. Chapter 2
#. Chapter 3

  1. Chapter 1
    1. Section 1.1
    2. Section 1.2
  2. Chapter 2
  3. Chapter 3

Table

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

Markdown: Inline formatting

Emphasis

To emphasize some text, surround it with *s or _, like this:

This text is \_emphasized with underscores\_, and this
is \*emphasized with asterisks\*.
Double * or _ produces strong emphasis:

This is \*\*strong emphasis\*\* and \_\_with underscores\_\_.

This text is emphasized with underscores, and this is emphasized with asterisks. Double * or _ produces strong emphasis.

This is strong emphasis and with underscores. A * or _ character surrounded by spaces, or backslash-escaped, will not trigger emphasis.

Markdown: Inline formatting

Strikthrough

This ~~is deleted text.~~ This is deleted text.

Superscripts and subscripts

H~2~O is a liquid. 2^10^ is 1024. H2O is a liquid. 210 is 1024.

Verbatim. inline code

Use backtick `. What is the difference between `>>=` and `>>`? What is the difference between >>= and >>?

Note:

Images

A link immediately preceded by a ! will be treated as an image. The link text will be used as the image’s alt text:

![Pizza](imgs/bitcoin-pizza.png)

Pizza

Pizza

Formula

MathJax. Use laTex syntax. There are many online references.

Inline with text

$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)

Centered

$$\sum_{i=1}^n X_i$$

\[\sum_{i=1}^n X_i\]

R Markdown

Reference in R Studio

Create it via File > New File > R Markdown.

R Markdown Document example

---
title: "Data Analysis Report"
author: "Yang Ye"
date: "October 23, 2018"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## Report
```{r cars}
summary(cars)
```

## Including Plots
```{r pressure, echo=FALSE}
plot(pressure)
```

R Markdown Document Output

In the header, you can change the output to other types:

Code block for R Markdown

## [1] 7

Chunk options

R Markdown example: Table

```{r kable}
knitr::kable(
  mtcars[1:5, ], 
  caption = "A knitr kable."
)
```
A knitr kable.
mpg cyl disp hp drat wt qsec vs am gear carb
Mazda RX4 21.0 6 160 110 3.90 2.620 16.46 0 1 4 4
Mazda RX4 Wag 21.0 6 160 110 3.90 2.875 17.02 0 1 4 4
Datsun 710 22.8 4 108 93 3.85 2.320 18.61 1 1 4 1
Hornet 4 Drive 21.4 6 258 110 3.08 3.215 19.44 1 0 3 1
Hornet Sportabout 18.7 8 360 175 3.15 3.440 17.02 0 0 3 2

R Markdown example: Plot

```{r plot1, echo = FALSE}
a <- filter(cars, speed > 4)
plot(a)
```

R Markdown: Practice

R Shiny

UI First

I removed everything in functions server and ui. This is the minimal Shiny. (shiny-1-empty.R)

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(
)

# Define server logic required to draw a histogram
server <- function(input, output) {
}

# Run the application 
shinyApp(ui = ui, server = server)

fluidPage

Add some items

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(
  fluidPage(
    titlePanel("Hello Shiny!"),
    sidebarLayout(
      sidebarPanel(
        h1("Introduction to Layout"),
        h2("Sidebar Layout")
      ),
      mainPanel(
        img(src = "p19-Hero-Image-796x398.jpg")
      )
    )
  )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
}

# Run the application 
shinyApp(ui = ui, server = server)

More tags

Sidebar with more tags (shiny-3-sidebar.R)

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(
  fluidPage(
    titlePanel("Hello Shiny!"),
    sidebarLayout(
      sidebarPanel(
        h1("Introduction to Layout"),
        h2("Sidebar Layout"),
        a("A link to Google", href="http://www.google.com"),
        # unordered list
        tags$ul("About",
          tags$li("Who are we"),
          tags$li("What we do")
        ),
        # ordered list  
        tags$ol("Steps",
          tags$li("Write"),
          tags$li("Run")
        )
      ),
      mainPanel(
        img(src = "p19-Hero-Image-796x398.jpg")
      )
    )
  )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
}

# Run the application 
shinyApp(ui = ui, server = server)

Each tag is a function.

h1("A header")
p("some text as a paragraph")
a("A link to Google", href="http://www.google.com")
img(src = "p19-Hero-Image-796x398.jpg", width = "100%")
tags$ul("title", tags$li("Item 1"), tags$li("Item 2"))
tags$ol("Step", tags$li("Item 1"), tags$li("Item 2"))

Note:

Panels

titlePanel() and wellPanel() (shiny-4-wellPanel.R)

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(
  fluidPage(
    titlePanel("Hello Shiny!"),
    sidebarLayout(
      sidebarPanel(
        h1("Well 1"),
        wellPanel(
          h2("Well 1.1"),
          actionButton("goButton", "Go!")
        ),
        h1("Well 2"),
        wellPanel(
          h2("Well 2.1"),
          actionButton("goButton2", "Go!")
        )
      ),
      mainPanel(
      )
    )
  )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
}

# Run the application 
shinyApp(ui = ui, server = server)

tabPanel (shiny-6-tabPanel.R)

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(
  fluidPage(
    titlePanel("Hello Shiny!"),
    tabsetPanel(
      tabPanel("Plot", h1("plot")), 
      tabPanel("Summary", h1("summary")), 
      tabPanel("Image", img(src = "p19-Hero-Image-796x398.jpg"))
    )
  )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
}

# Run the application 
shinyApp(ui = ui, server = server)

Column-based layout (shiny-8-column.R)

library(shiny)

ui <- fluidPage(
  fluidPage(
    fluidPage(
      titlePanel("Hello Shiny!"),
      fluidRow(
        column(4,
               wellPanel(
                 dateInput("date", "How's weather today?")
               )
        ),
        column(6,
               h3("Plot"),
               wellPanel(plotOutput("distPlot"))
        ),
        column(2, h3("Extra"),
               wellPanel(plotOutput("extraPlot"))
               )
      )
    )

    )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
}

# Run the application 
shinyApp(ui = ui, server = server)

Composition layout: Top and Down (shiny-10-composite.R)

library(shiny)
library(ggplot2)

ui <- fluidPage(
  fluidPage(
    fluidPage(
      title = "Diamonds Explorer",
      fluidRow(
        column(12,
               img(src = "p19-Hero-Image-796x398.jpg", width = "100%")
               )
      ),
      
      hr(),
      fluidRow(
        column(3,
               h4("Diamonds Explorer"),
               sliderInput('sampleSize', 'Sample Size', 
                           min=1, max=nrow(diamonds), value=min(1000, nrow(diamonds)), 
                           step=500, round=0),
               br(),
               checkboxInput('jitter', 'Jitter'),
               checkboxInput('smooth', 'Smooth')
        ),
        column(4, offset = 1,
               selectInput('x', 'X', names(diamonds)),
               selectInput('y', 'Y', names(diamonds), names(diamonds)[[2]]),
               selectInput('color', 'Color', c('None', names(diamonds)))
        ),
        column(4,
               selectInput('facet_row', 'Facet Row', c(None='.', names(diamonds))),
               selectInput('facet_col', 'Facet Column', c(None='.', names(diamonds)))
        )
      )
    )
  )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
}

# Run the application 
shinyApp(ui = ui, server = server)

R Markdown can also contain Shiny (shiny-mfe-example.Rmd)

---
title: "MFE FE8828 Assignment 1"
date: 2018-11-03
output: html_document
runtime: shiny
---
  
```{r setup, include = FALSE}
```

# Use echo = TRUE for assignment is an exception, so code is visible.
```{r, echo = TRUE}
wellPanel("Inputs",
          numericInput("fav_num", "What's your favorite number?", 3))
```
Inputs

This is interactive document.

Assignments